"use client"

import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { useDashboardStats } from "@/hooks/use-dashboard-stats"
import { DeviceTypeTree } from '@/components/device-type-tree'
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"


export default function PipingPage() {
  // 获取统一的数据源用于侧边栏
  const { stats: dashboardStats } = useDashboardStats()
  
  const [selectedSubSpecialty, setSelectedSubSpecialty] = useState<string>('all')
  
  // 定义配管专业的子专业
  const pipingSubSpecialties = [
    { value: 'all', label: '全部' },
    { value: '给排水', label: '给排水' },
    { value: '消防', label: '消防' },
    { value: '工艺', label: '工艺' },
    { value: '配管', label: '配管' }
  ]


  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar
        dataCounts={dashboardStats || {}}
      />

      <div className="flex-1 flex flex-col overflow-hidden">
        <div className="flex-1 overflow-auto">
          <div className="container mx-auto py-8">
            <div className="mb-8">
              <div className="flex items-center gap-4 mb-4">
                <h1 className="text-4xl font-bold text-primary">实体对象分类及属性管理系统</h1>
                <Badge className="blue-badge-solid">配管专业</Badge>
              </div>
              <p className="text-muted-foreground">
                按设备类型管理配管专业设备，点击"添加"按钮创建设备实例，每个设备实例可配置参数
              </p>
{/* 新的管理方式提示 - 已隐藏
              <div className="mt-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
                <p className="text-sm text-blue-800">
                  <strong>💡 新的管理方式：</strong>
                  每个设备类型都可以创建多个设备实例。点击"添加"按钮输入设备编号创建实例，
                  然后点击"参数配置"进入详细的参数编辑页面。
                </p>
              </div>
              */}
            </div>

            {/* 配管专业子专业切换 */}
            <div className="mb-6">
              <Tabs value={selectedSubSpecialty} onValueChange={setSelectedSubSpecialty}>
                <TabsList className="grid w-full grid-cols-5">
                  {pipingSubSpecialties.map((subSpecialty) => (
                    <TabsTrigger key={subSpecialty.value} value={subSpecialty.value}>
                      {subSpecialty.label}
                    </TabsTrigger>
                  ))}
                </TabsList>
                
                {pipingSubSpecialties.map((subSpecialty) => (
                  <TabsContent key={subSpecialty.value} value={subSpecialty.value}>
                    <DeviceTypeTree 
                      specialty="配管专业" 
                      subSpecialty={subSpecialty.value === 'all' ? undefined : subSpecialty.value}
                    />
                  </TabsContent>
                ))}
              </Tabs>
            </div>

            {/* 返回主页按钮 */}
            <div className="mt-8">
              <Link href="/">
                <Button variant="outline">返回主页</Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}